<template>
    <div>
        <!-- -->
        <p> About</p>

        <p>{{ str2 }}</p>
        <p>{{ str3 }}</p>
        <p>{{ str4 }}</p>
        <p> <button @click="refsGet">父组件用refs拿到子组件的值</button></p>
        <p><button @click="childrenGet">父组件用childern拿到子组件的值</button></p>

        <son
            :str="str"
            @change="sonChange"
            ref="child"
        ></son>
        <br>
        <borther></borther>
    </div>
    <!-- 
        父传子：props，$prent,provide
        props:父传子,子不能改
        $parent:父直接定义,子可以直接用也可以直接改
        provide:父可以传给任意一个后辈子组件,任意一个后辈子组件都可以拿来用,但是不能改

        子传父：emits,refs
        emits:自定义事件传值, 父通过自定义事件的参数接受
        refs,$childern:父组件直接拿到子组件的值
        ref定义,refs接受
        childern数组内找到对应的子组件内的数据直接使用
        兄弟传兄弟：vuex eventbus
        vuex:状态管理,集中式管理
        eventbus:事件总线,兄弟之间传值
     -->
    <!-- 插槽
        默认插槽
        具名插槽
        作用域插槽
      -->
</template>

<script>
import son from '../components/son.vue'
import borther from '../components/borther.vue'
export default {
    components: {
        son,
        borther
    },
    provide() {
        return {
            val: '父组件注入的数据'
        }
    },
    data() {
        return {
            str: '父组件的数据',
            str2: '',
            str3: '',
            str4: '',
            people: [
                { name: "alice", age: 21 },
                { name: "max", age: 20 },
                { name: "jane", age: 20 },
            ],
            arr: [1, 2, 3, 4, 5]
        };

    },

    mounted() {
        // const groupedPeople = this.groupBy(this.people, 'age')
        // console.log(groupedPeople);
        const sum = this.getSum(this.arr)
        console.log(sum);
    },

    methods: {
        // objectArray:数组, property:属性名
        // 返回一个对象, 对象内键是以传进来的属性名进行的分类, 值是属性名对应的数组
        groupBy(objectArray, property) {
            return objectArray.reduce((pre, obj) => {
                const key = obj[property] //
                const curGroup = pre[key] ?? []
                return { ...pre, [key]: [...curGroup, obj] }
            }, {})
        },
        async sonChange(val) {

        },
        getSum(arr) {
            return arr.reduce((pre, item) => {
                return pre + item // 0+1 1+2 2+3 5+4 9+5
            }, 0)
        },
        refsGet() {
            this.str3 = this.$refs.child.value
        },
        childrenGet() {
            this.str4 = this.$children[0].value
        }
    },
};
</script>